<template>
  <div class="app-container home">


    <el-row :gutter="20" class="panel-group">
      <el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
        <div>
          <img src="../../assets/images/dv1.png" @click="gotoDv1()" width="75%">
        </div>

        <div class="title">舆情事件数据</div>
      </el-col>

      <el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
        <div>
          <img src="../../assets/images/dv2.png" @click="gotoDv2()" width="75%">
        </div>
        <div class="title">舆情主题监测</div>
      </el-col>


      <el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
        <div>
          <img src="../../assets/images/dv3.png" @click="gotoDv3()" width="75%">
        </div>
        <div class="title">24小时舆情直播</div>
      </el-col>


    </el-row>


  </div>


</template>

<script>
  import CountTo from 'vue-count-to'
  import WordCloud from '@/components/Echarts/WordCloud'
  import Scatter from '@/components/Echarts/Scatter'
  import RadarChart from '@/components/Echarts/RadarChart'
  import MapWorldChart from '@/components/Echarts/MapWorldChart'
  import MapChinaChart from '@/components/Echarts/MapChinaChart'


  export default {
    name: 'Home',
    components: {
      CountTo,
      WordCloud,
      Scatter,
      RadarChart,
      MapWorldChart,
      MapChinaChart
    },
    data() {
      return {
        title: "数据大屏",


      }
    },

    methods: {
      gotoDv1() {
        this.$router.push('/datav/dv1')
      },
      gotoDv2() {
        this.$router.push('/datav/dv2')
      }
      ,
      gotoDv3() {
        this.$router.push('/datav/dv3')
      }

    },
    created() {
    },
    mounted() {
    }


  }
</script>

<style lang="scss" scoped>


  .home {
    min-height: calc(100vh - 100px);
    background-color: white;
  }

  .panel-group {
    margin-top: 18px;
    text-align: center;

    .card-panel-col {
      margin-bottom: 0px;
    }
  }

  .title {
    text-align: center;
    font-weight: bold;
  }

</style>




